<template>
  <!--<v-card class="mx-auto">-->
    <v-data-table
            :headers="headers"
            :items="data_list"
            hide-default-footer
            sort-by="projectName"
            show-expand>

      <!--新增按钮及新增修改弹出框-->
      <template v-slot:top>
        <v-toolbar flat color="white">
          <v-dialog v-model="dialog" max-width="800px">
            <template v-slot:activator="{ on, attrs }">
              <v-btn color="primary"
                     dark
                     class="mb-2"
                     v-bind="attrs"
                     v-on="on">新增模板配置</v-btn>
            </template>

            <v-card>
              <v-card-title>
                <span class="headline">{{ formTitle }}</span>
              </v-card-title>

              <v-card-text>
                <v-container>
                  <v-form  ref="dialogForm" v-model="dialogValid">

                      <v-select v-model="editedItem.projectId"
                                :items="proItems"
                                @change="onProSelected"
                                item-text="projectName"
                                item-value="id"
                                :rules="projectRules"
                                label="模板所属的项目"></v-select>

                      <v-text-field v-model="editedItem.templateName"
                                    :rules="templateNameRules"
                                    label="模板文件名称"></v-text-field>

                      <v-text-field v-model="editedItem.targetName"
                                    :rules="targetNameRules"
                                    label="生成代码文件名"></v-text-field>

                      <v-text-field v-model="editedItem.templatePath"
                                    :rules="templatePathRules"
                                    label="模板磁盘路径()"></v-text-field>

                      <v-text-field v-model="editedItem.targetPath"
                                    :rules="targetPathRules"
                                    label="生成代码文件保存路径"></v-text-field>

                      <v-textarea v-model="editedItem.otherInfo"
                                  filled
                                  label="附加信息(JSON)格式"
                                  auto-grow></v-textarea>

                  </v-form>
                </v-container>
              </v-card-text>

              <v-card-actions>
                <v-spacer></v-spacer>
                <v-btn color="blue darken-1" text @click="close">取消</v-btn>
                <v-btn color="blue darken-1"  @click="save">保存</v-btn>
              </v-card-actions>
            </v-card>
          </v-dialog>
        </v-toolbar>
      </template>
      <!--每一行后面的操作按钮 -->
      <template v-slot:item.actions="{ item }">
        <v-icon small class="mr-2" @click="editItem(item)">
          mdi-pencil
        </v-icon>
        <v-icon small @click="deleteItem(item)">
          mdi-delete
        </v-icon>

        <v-icon small @click="copyItem(item)">
          mdi-plus
        </v-icon>
      </template>
      <!--当没有数据的时候显示的内容 -->
      <template v-slot:no-data>
        <v-card-text>请添加数据</v-card-text>
      </template>

      <template v-slot:expanded-item="{ headers, item }">
        <td :colspan="headers.length-2">onceData.templateInfo：{{ item.otherInfo }}</td>
      </template>


    </v-data-table>
  <!--</v-card>-->
</template>

<script>
  export default {
    data: () => ({
      dialog: false,
      headers: [
        {
          text: '模板所属的项目名称',
          align: 'start',
          sortable: false,
          value: 'projectName',width:'15%'
        },
        { text: '模板文件名称', value: 'templateName',align:'center' ,width:'10%'},
        { text: '生成代码文件名', value: 'targetName' ,align:'center',width:'15%'},
        { text: '模板保存路径', value: 'templatePath' ,align:'center',width:'25%'},
        { text: '生成代码文件路径',value: 'targetPath',align:'center',width:'25%'},
        { text: '操作', value: 'actions', sortable: false ,width:'8%'},
        { text: '', value: 'data-table-expand',align:'end',width:'5%' }
      ],
      proItems: [],  //模板所属的项目选择列表
      data_list: [],
      data_collection:'template_config',
      editedId: '', //默认新增数据，新增数据没有id
      editedItem: {
        id: '',
        projectName: '',
        projectId: '',
        templateName: '',
        targetName: '',
        templatePath: '',
        targetPath: '',
        otherInfo: '' //附加JSON信息
      },
      defaultItem: {
        id: '',
        projectName: '',
        projectId: '',
        templateName:'',
        targetName: '',
        templatePath: '',
        targetPath: '',
        otherInfo: ''  //附加JSON信息
      },
      dialogValid: true,
      projectRules:[
        value => !!value || '请选择模板所属的项目',
      ],
      templateNameRules:[
        value => !!value || '请输入模板文件名称',
      ],
      targetNameRules:[
        value => !!value || '请输入生成代码文件名称',
      ],
      templatePathRules:[
        value => !!value || '请输入模板文件所在路径',
      ],
      targetPathRules:[
        value => !!value || '请输入生成代码文件保存路径',
      ],

    }),

    computed: {
      formTitle () {
        return this.editedId === '' ? '新增数据项' : '修改数据项'
      },
    },

    watch: {
      dialog (val) {
        val || this.close()
      },
    },

    created () {
      this.initialize()
    },

    methods: {
      initialize () {
        this.proItems = this.$db.get("project_config").value()
        this.data_list = this.$db.read().get(this.data_collection).value()
      },
      onProSelected(){
        this.editedItem.projectName =
                this.$db.read().get("project_config")
                               .find({ id: this.editedItem.projectId })
                               .value().projectName
      },
      editItem (item) {
        this.editedId = item.id
        this.editedItem = this.$db.read().get(this.data_collection)
                .find({ id: item.id })
                .value()
        this.dialog = true
      },
      deleteItem (item) {

        confirm('您确定要删除 ' + item.projectName + '么?')
        && this.$db.get(this.data_collection)
                .removeById(item.id)
                .write()
        this.data_list = this.$db.get(this.data_collection).value()
      },
      close () {
        this.dialog = false
        this.$refs.dialogForm.resetValidation()
        this.$nextTick(() => {
          this.editedItem = Object.assign({}, this.defaultItem)
          this.editedId = ''
        })
      },
      save () {
        if (this.editedId !== '') { //修改数据
          this.$db.read().get(this.data_collection)
                  .find({ id: this.editedId })
                  .assign(this.editedItem)
                  .write()
          this.data_list = this.$db.get(this.data_collection).value()
        } else { //新增数据
          this.$db.read().get(this.data_collection).insert(this.editedItem).write()
          this.initialize()
        }
        this.close()
      },
      copyItem(item){
        item.id = '';
        confirm('您确定要从 ' + item.templateName + '复制一个模板么?')
        && this.$db.read().get(this.data_collection).insert(item).write()
        && this.initialize()
      }
    },
  }
</script>
